<template>
  <!-- 监察端总花名册 -->
  <div ref="mainCon" class="container">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField">
          <el-col :lg="8" :xl="6">
            <el-form-item label="人员姓名" class="row-padding-bottom">
              <el-input
                placeholder="请输入姓名或身份证号"
                clearable
                v-model="filterField.keyword"
                @blur="filterField.keyword = changeValue($event)"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6" v-if="isKMUser()">
            <el-form-item label="户籍" class="row-padding-bottom">
              <el-cascader
                ref="manageArea"
                v-model="filterField.census"
                :append-to-body="false"
                :options="liveAddressOptions"
                @change="getAreaId"
                clearable
                filterable
                :props="{ checkStrictly: true, emitPath: false }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-form-item>
            <!-- <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchTable" class="commonBtn"></el-button> -->
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchTable"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
          <el-form-item style="margin-left: 6px">
            <exportBtn
              :dataLen="tableData.length"
              :filterField="filterField"
              api="api-s/report/export_JC_CS_EMP"
            ></exportBtn>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <!-- 列表 -->
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
          @sort-change="sortChange"
        >
          <el-table-column
            align="center"
            prop="idcardPhoto"
            label="身份证照片"
            min-width="120"
          >
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.idcardPhoto"
                style="width: 50px; height: 50px; top: 3.5px"
                :src="scope.row.idcardPhoto"
                :preview-src-list="scope.row.idcardImgList"
              >
              </el-image>
              <el-image
                v-else
                src="../../../static/img/employee/card.png"
                alt=""
                style="width: 50px; height: 50px; top: 3.5px"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="姓名"
            :formatter="formatTd"
            min-width="120"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="idcard"
            label="身份证号"
            min-width="120"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.idcard | deseHandler(4, 4, '*') || '--' }}</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="census"
            label="户籍"
            :formatter="formatTd"
            v-if="isKMUser()"
            min-width="180"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="sexValue"
            label="性别"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="nationalityValue"
            label="民族"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="inputDate"
            label="录入时间"
            sortable="custom"
            :formatter="formatTd"
            min-width="180"
          >
            <!-- 恩施展示 yyyy-mm-dd  hh:mm:ss -->
            <!-- 其他区域展示 yyyy-mm-dd  -->
            <template slot-scope="scope">
              <span v-if="scope.row.inputDate">{{
                isEnShi
                  ? scope.row.inputDate
                  : scope.row.inputDate.substring(0, 10)
              }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="操作" fixed="right" width="80px">
            <template slot-scope="scope">
              <el-link
                type="primary"
                v-hasBtn="'mEmoloyeeList:detail'"
                @click="seeDetail(scope.row.id)"
                >查看</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :requestUrl="requestUrl"
          :filterField="filterField"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'employeeTotalListJC',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '花名册',
      requestUrl: 'api-e/cs/employee/expand/emp', //表格请求路径
      tableData: [],
      idcardImgList: [],
      back: true,
      filterField: {
        keyword: '',
        census: '',
      },
      loading: true,
      isShow: false,
      isEnShi: false,
    }
  },
  computed: {
    ...mapState(['liveAddressOptions']),
  },
  created() {
    this.isEnShi = this.isEsUser()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.getLiveAddressList()
  },
  methods: {
    ...mapActions(['getLiveAddressList']),
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      } else {
        this.idcardImgList = []
        for (var i = 0; i < this.tableData.length; i++) {
          this.idcardImgList.push(this.tableData[i].idcardPhoto)
        }
        for (var i = 0; i < this.tableData.length; i++) {
          var container = this.idcardImgList
          var frontArr = container.slice(0, i)
          var behindArr = container.slice(i, this.tableData.length)
          var list = behindArr.concat(frontArr)
          this.tableData[i].idcardImgList = list
        }
      }
    },
    //列表查询
    searchTable() {
      this.$refs.pagination.getTableListData()
    },
    //查看详情
    seeDetail(employeeId) {
      this.$router.push({
        path: '/home/employee/employeeInfoC',
        name: 'employeeInfoC',
        query: {
          employeeId: employeeId,
          path: 'JC',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/employee/employeeTotalListJC',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
// .container {
//   padding: 24px;
// //   position: relative;

//   .topCon{
//     margin:0px;
//   }
//   .mainCon {
//     top: 197px;
//   }
// }
@import '../../../static/css/filterArea.less';
</style>
